<!--  
  @description: 日志管理
  @author: chang
  @create: (xxxx-xx-xx) 2021-8-17
  @update: chang(添加按条件导出表格) 2021-09-24
   -->

<template>
  <div class="app-container">
    <!-- height="300"固定表头，border显示竖直边框 ,stripe显示斑马纹 -->
    <div class="log-box">
      <div class="log-title">日志管理</div>
      <div class="search-box">
        <div class="search-option">
          <div class="search-item">
            <span class="s-title">描述信息</span>
            <el-input v-model="logInfo" clearable class="s-name" autocomplete="on" placeholder="请输入描述信息" />
          </div>
          <div class="search-item">
            <span class="s-title">类型</span>
            <el-select filterable v-model="checkValue" clearable placeholder="请选择" style="width:300px" @change="select">
              <el-option
                v-for="item in typeList"
                :key="item.busi_value"
                :label="item.busi_name"
                :value="item.busi_value"
              />
            </el-select>
          </div>
        </div>
        <div class="search-option" style="padding-top:20px">
          <div class="search-item" style="width:100%">
            <span class="s-title">时间范围</span>
            <el-date-picker v-model="startDate" type="datetime" :editable="false" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" style="width: 200px;" />
            <span class="s-title">到</span>
            <el-date-picker v-model="endDate" type="datetime" :editable="false" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" style="width: 200px;" />
            <el-button type="primary" style="margin-left:10px;" @click="search" icon="el-icon-search">查询</el-button>
            <el-button type="warning" :loading="downloadLoading" @click="exportExcel" icon="el-icon-download" >导出EXCEL</el-button>
          </div>
        </div>
      </div>
      <div class="log-table-div">
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="200" />
          <el-table-column prop="createtime" label="触发时间" width="280" />
          <el-table-column label="用户名" width="280">
            <template slot-scope="scope">
              <span>{{ scope.row.username||'null' }}</span><span>—</span><span>{{ scope.row.user_relName||'null' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="级别" width="240">
            <template slot-scope="scope">
              <el-tag type="warning" size="small" effect="dark">{{ scope.row.log_type_text }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="log_info" label="描述信息" />
        </el-table>
      </div>
      <div class="log-pagination-div">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :pager-count="pageCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { logList, outExcel } from '@/api/log-manage'
import { downloadFile } from '@/utils/downloadFile'

export default {
  name: 'Index',
  data() {
    return {
      tableData: [], // 列表数据
      pageSize: 10, // 每页条数
      pageCount: 7, //
      pageSizes: [10, 20, 30, 40, 50], // 个数选择器
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      loading: false,
      typeList: [], // 日志类型
      checkValue: '', // 选中日志值
      logInfo: '', // 描述信息
      startDate: '', // 开始时间
      endDate: '', // 结束时间
      downloadLoading: false // excel下载状态
    }
  },
  computed: {},
  mounted() {
    this.getData(this.currentPage, this.pageSize)
  },
  methods: {
    /* eslint-disable */   //如果要eslint验证，请把这段代码删掉
    
    // 每页显示的条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getData(1,val)
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },

    // 显示第几页
    handleCurrentChange(val) {
      this.currentPage = val
      // 切换页码时，要获取每页显示的条数
      this.getData(val,this.pageSize)
    },

    // 获取日志列表
    getData(page,size){
      const param = {
        'log_info': this.logInfo,
        'log_level': this.checkValue,
        'startdate': this.startDate,
        'enddate': this.endDate,
        'pageNumber':page,
        'pageSize':size
      }
      logList(param).then(res=>{
        if(res.state){
          // console.log(res)
          this.tableData=res.data.page.list
          this.typeList=res.data.types
          this.total=res.data.page.totalRow
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    // 查询
    search(){
      this.getData(this.currentPage,this.pageSize)
    },

    // 选择日志类型
    select(e) {
      this.checkValue=e
      // console.log(e)
    },

    // 导出excel
    exportExcel() {
      this.downloadLoading = true
      const data={
        'log_info': this.logInfo,
        'log_level': this.checkValue,
        'startdate': this.startDate,
        'enddate': this.endDate,
      }

      outExcel({data:data}).then(res=>{
        this.downloadLoading = false
        const date=this.format()
        // console.log(res)
        // 创建Blob对象，设置文件类型
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const fileName = `日志(${date}).xls` // 自定义文件名

        downloadFile(blob,fileName) //文件开始下载(参数1:Blob对象，参数2:下载的文件名)
      })
    },

    //时间戳格式化函数 
    format() {
      let time = new Date(Date.now())
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      // let h = time.getHours();
      // let mm = time.getMinutes();
      // let s = time.getSeconds();
      let currentDate = y + '-' + this.handleTime(m) + '-' + this.handleTime(d)
      return currentDate
    },

    //月、日、时、分、秒
    handleTime(m) {
      return m < 10 ? '0' + m : m
    },

  }
}
</script>

<style lang="scss" scoped>
.log-box{
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.12);
  background: #fff;

  .log-title{
    font-size: 15px;
    color: #333;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .search-box{
    padding: 20px 15px;
    .search-option{
      display: flex;
      align-items: center;
      .search-item{
        display: flex;
        align-items: center;
        margin-left: 40px;
        .s-name{
          width: 300px;
        }

        .s-title{
          font-size: 15px;
          color:#666;
          padding: 0 10px;
        }
      }
    }
  }

  .log-table-div{
    padding: 15px;
  }

  .log-pagination-div{
    display: flex;
    align-items: center;
    // justify-content: flex-end; //右对齐
    margin: 10px 15px 15px 15px;
    padding: 10px 0px;
    border-top: 1px solid #dfe6ec;
  }

}

</style>
